//@import url(https://fonts.googleapis.com/css?family=Lato:300,400,700|PT+Mono);
@import (inline) "~codemirror/lib/codemirror.css";
@import (inline) "./index.css";

@color-1st: LightCoral;
@color-2nd: GhostWhite;
@color-3rd: Gainsboro;

main{
	min-height:100vh;
	display:flex;
	display:-webkit-flex;
	-webkit-align-items:center;
	align-items:center;
	-webkit-flex-direction:column;
	flex-direction:column;
}

.title{
	color:#fff;
	text-align:center;
	font-weight:300;
	text-shadow:0 1px 0 rgba(0,0,0,0.2);
	font-size:2.8em;
	margin-top:1.5em;

	small{
		display:block;
		font-size:0.6em;
		margin-top:0.4em;
	}
}

.credits{
	color:#fff;
	text-shadow:0 1px 0 rgba(0,0,0,0.2);
	margin-top:2em;
	font-size:0.8em;
	opacity:0.5;
}

.window{
	width:547px;
	background:@color-2nd;
	border-radius:0.3rem;
	box-shadow:0 8px 12px rgba(0,0,0,0.1);
	overflow:hidden;

	.window-header{
		height:37px;
		background:@color-3rd;
		position:relative;

		.action-buttons{
			position:absolute;
			top:50%;
			left:10px;
			margin-top:-5px;
			width:10px;
			height:10px;
			background:Crimson;
			border-radius:50%;
			box-shadow:
				15px 0 0 Orange,
				30px 0 0 LimeGreen;
		}

		.language{
			display:inline-block;
			position:absolute;
			right:10px;
			top:50%;
			margin-top:-10px;
			height:21px;
			padding:0 1em;
			text-align:right;
			-webkit-appearance:none;
			appearance:none;
			border:none;
			background:transparent;
			font-family:Lato, sans-serif;
			color:DimGrey;

			&:before{
				content:'asd';
			}

			&:hover{
				background:rgba(0,0,0,0.1);
			}
		}
	}

	.window-body{
		position:relative;
		height:300px;

		.code-input, .code-output{
			position:absolute;
			top:0;
			left:0;
			width:100%;
			height:100%;
			padding:1rem;
			border:none;
			font-family:'PT Mono', monospace;
			font-size:0.8rem;
			background:transparent;
			white-space:pre-wrap;
			line-height:1.5em;
			word-wrap: break-word;
		}

		.code-input{
			opacity:0.7;
			margin:0;
			color:#999;
			resize:none;
		}

		.code-output{
			pointer-events:none;
			z-index:3;
			margin:0;
			overflow-y:auto;

			code{
				position:absolute;
				top:0;
				left:0;
				margin:0;
				padding:1rem;
				display:block;
				color:#666;
				font-size:0.8rem;
				font-family:'PT Mono', monospace;
			}
		}
	}
}

// Prism.js colors
a.token{
	text-decoration:none;
}
.token
{

	&.selector, &.punctuation, &.keyword{
		color:PaleVioletRed;
	}

	&.property, &.number, &.string, &.punctuation, &.tag-id{
		color:DodgerBlue;
	}

	&.function, &.attr-name{
		color:CadetBlue;
	}

	&.atrule{
		.atrule-id{
			color:BlueViolet;
		}
	}

	&.boolean{
		color:LightSlateGray;
	}

	&.comment{
		color:DarkGrey;
	}
}

.language-php{
	.variable{
		color:CadetBlue;
	}
}
